<template>
  <div class="iframe">
    <div class="i-title">
      <h3>reactive 响应式变化</h3>
    </div>
    <div class="i-tip">
      {{info}}总分:{{score}}
    </div>
    <div class="i-tip">
      <span v-for="(item,index) in sub" :key="index">{{item}},</span>
    </div>
  </div>
</template>

<script>
  import {
    ref,
    reactive
  } from 'vue'
  export default {
    name: "hello",
    setup() {
      let score = ref(0);
      let info = ref("");
      let stu = reactive({
        name: "精英中学",
        grade: {
          name: "一年级",
          cls: {
            name: "3班",
            stuinfo: {
              name: "王小波",
              score: 60
            }
          }
        }
      })
      let sub = reactive(["语文", "数学", "英语", "生物"]);
      info = stu.name + "," + stu.grade.name + "," + stu.grade.cls.name + "," + stu.grade.cls.stuinfo.name
      setInterval(() => {
        score.value = stu.grade.cls.stuinfo.score++;
      }, 1000)
      setTimeout(() => {
        sub.push("政治");
        sub[2] = "化学"
      }, 2000)
      return {
        info,
        score,
        sub
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
